<template>
	<view class="content">
		<!-- <view class="user-info bg-radius">
			<uni-list :border="false">
				<uni-list-chat :avatar-circle="true" :title="userusername" avatar="/static/img/img.png" :note="usermobile"
				v-if="useravatar == '' || useravatar == null"></uni-list-chat>
				<uni-list-chat  :title="userusername" :avatar="useravatar" :note="usermobile" v-else></uni-list-chat>
			</uni-list>
		</view> -->
		<!-- <view class="my-shop-hd">
			<view class="user-info">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" :title="userusername" avatar="/static/img/img.png" :note="usermobile"
					v-if="useravatar == '' || useravatar == null"></uni-list-chat>
					<uni-list-chat  :title="userusername" :avatar="useravatar" :note="usermobile" v-else></uni-list-chat>
				</uni-list>
			</view>
			<view class="my-card weui-media-box_appmsg">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text>超级抵现卡</text>
				</view>
				<navigator class="instructions" url="privilege_statement">特权使用说明</navigator>
			</view>
		</view> -->
		<top-userinfo :userusername="userusername" ref="topuserinfo" :parentData="false"></top-userinfo>
		
		<view class="card-bg">
			<button size="mini" @click="toggle" :class="{ active: isActive }"  v-if="isObjectEmpty(usermycards)">{{ isActive ? '入卡' : '出卡' }}</button>
			<view class="card-cover uni-center"></view>
			<view class="card card-vip" :class="{ 'card-active': isActive }" v-if="isObjectEmpty(usermycards)">
				<view class="card-hd">
					<view>我的抵现特权卡</view>
					<!-- <view v-if="usermycards != null">{{shopinfoarr.shop.shop_name}}</view> -->
				</view>
			    <view aria-hidden="true" class="card-bd">
			        <!-- <strong class="weui-media-box__title">{{'尊敬的 '+ (userusername == null ? '' : userusername) +' 欢迎回来'}}</strong> -->
					<view class="join" v-if="usermycards != null">
						<text>抵现卡数量</text>
						<text>
							{{usermycards.score_card_count}}
						</text>
					</view>
					<view class="city" v-if="usermycards != null">
						<text>特权卡数量</text>
						<text>{{usermycards.privilege_card_count}}</text>
					</view>
			    </view>
			</view>
		</view>
		
		
		
		<!-- ///////////////////// 旧版内容 勿删！！///////////////////// -->
		<view class="user-info" style="display: none;">
			<view class="user-info-box ">
				<view class="weui-panel__bd">
				    <view class="weui-media-box weui-media-box_appmsg shop-hd">
				        <view class="weui-media-box__hd">
							<img class="weui-media-box__thumb" src="/static/img/img.png" alt="" v-if="useravatar == '' || useravatar == null" />
							<img class="weui-media-box__thumb" :src="useravatar" alt="" v-else />
						</view>
				        <view class="weui-media-box__bd">
							<strong class="weui-media-box__title">{{userusername}}</strong>
							<text class="weui-media-box__desc">{{usermobile}}</text>
				        </view>
				    </view>			    
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	
	import {sync_coordinates,usermy_cards,getuserget_check_code,userget_shop_detail,userget_shop_list} from "@/api/apiinfo";
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
		data() {
			return {
				title: 'Hello',
				pagenumber:1,
				listarr:[],
				
				status: 'more',
				scrollTop: "50px",
				loadings: "加载中。。。", //more/loading/noMore
				isLoadingTop: true,
				isTriggeredTop: true,
				isShowBtm: false,
				
				shopnumber:0,
				userusername:'',
				usernickname:'',
				useravatar:'',
				usermobile:'',
				
				addressvalue:'',
				
				isActive: false,
				
				shopinfoarr:{
					  shop:{},
					  card:{},
				},
				check_code:'',
				
				cardinfo:null,
				usermycards:{
					privilege_card_count:0,
					score_card_count:0,
				}
			}
		},
		
		mounted() { ////////////////// uni组件样式重定义
			this.getlocationinfo()
		// 		var str = document.getElementsByClassName("uni-list-chat__header-image");
		// 		Array.prototype.forEach.call(str, function(headerImage){
		// 			headerImage.style.margin = "0";
		// 		});
		// 		var str = document.getElementsByClassName("uni-list-chat__content-title");
		// 		Array.prototype.forEach.call(str, function(contentTitle){
		// 			contentTitle.style.color = "#fff";
		// 		});
		// 		var str = document.getElementsByClassName("uni-list-chat__content-note");
		// 		Array.prototype.forEach.call(str, function(contentNote){
		// 			contentNote.style.color = "#fff";
		// 		});
				
		// 		var str = document.getElementsByClassName("uni-select");
		// 		Array.prototype.forEach.call(str, function(select){
		// 			select.style.width = "100%";
		// 		});
		},
		
		onShow() {
			// let user_name = localStorage.getItem('username')
			// if(user_name == '' || user_name == null){
			// 	user_name = localStorage.getItem('nickname')
			// }
			// this.userusername = user_name;
			this.$nextTick(() => {
			    this.$refs.topuserinfo.getuserreload()
			});
			// localStorage.setItem('shopid', 51);//上线后删除
			// this.shopid = localStorage.getItem('shopid');
			// this.shopid = 51
			let mobile = uni.getStorageSync('mobile');
			console.log(mobile)
			// if(mobile == '' || mobile == null){
			// 	var getTimestamp=new Date().getTime();
			// 	uni.navigateTo({ //底部导航跳转方式
			// 		url: '/pages/shop/bind_phone?timestamp='+getTimestamp
			// 	});
			// }else{
				// this.shopinfo()
				this.getusermy_cards()
			// }
		},
		onLoad() {
			// 从localStorage中获取数据
			// localStorage.setItem('wxcode', this.code);
			// localStorage.setItem('userToken', res.token);
			// localStorage.setItem('userId', res.data.id);
			// localStorage.setItem('username', res.data.name);
			
			
			// this.getshoplist()
			// this.userusername = localStorage.getItem('username');
			// this.usernickname = localStorage.getItem('nickname');
			// this.useravatar = localStorage.getItem('avatar');
			// this.usermobile = localStorage.getItem('mobile');
			// if(this.usermobile == null){this.usermobile = ''}
			
			// let provincearr = localStorage.getItem('province');
			// let cityarr = localStorage.getItem('city');
			// if(provincearr != null && provincearr != ''){
			// 	provincearr = JSON.parse(provincearr);
			// 	cityarr = JSON.parse(cityarr);
			// 	console.log(JSON.stringify(provincearr))
				
			// 	this.addressvalue = provincearr.name;
			// 	this.addressvalue += ' - '+cityarr.name;
			// }else{
			// 	this.addressvalue = '暂无'
			// }
			
			uni.getUserInfo({
			    provider: 'weixin',
			    success: function(info) {
					console.log('获取用户信息')
					console.log(JSON.stringify(info))
			        // 获取用户信息成功, info.authResult是用户信息
			        const wxUserInfo = info.userInfo
					//	打印头像url
			        console.log(wxUserInfo.avatarUrl)
			        //	打印昵称
			        console.log(wxUserInfo.nickName)
			        //	打印用户详细信息
			        console.log(wxUserInfo)
			    }
			})
			

			
		},
		methods: {
			getlocationinfo(){
				let that = this
				uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
				        console.log('授权成功');
						uni.getSystemInfo({ //提醒用户开启定位服务
							success: function (res) {
								if(!res.locationEnabled){
									uni.showToast({
										title: '请开启位置服务！',
										duration: 2000
									});
								}
							}
						});
				        // 调用getLocation获取位置信息  
						uni.getLocation({
						    type: 'gcj02', // 可选，默认为 wgs84 返回gps坐标，gcj02 返回可用于uni-app的坐标
						    success: function (res) {
						        console.log('位置信息：');
								console.log(JSON.stringify(res))
						        // res.latitude, res.longitude 分别为经纬度信息
						        // 可以使用这些信息通过其他API服务（如高德地图、腾讯地图等）进行地址解析
								
								let datas = {
									longitude:res.longitude,
									latitude:res.latitude
								}
								that.submitll(datas)
						    },
						    fail: function (err) {
						        console.log('获取位置失败', err);
								
						    }
						});
				    },
				    fail() {
				        console.log('授权失败');
				        // 处理用户拒绝授权的情况
						// uni.showModal({啥
						//   title: '提示',
						//   content: '请前往设置开启位置权限',
						//   success(res) {
						//     if (res.confirm) {
						//       // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
						//       uni.getSetting({
						//          success(res) {
						// 			 console.log("用户是否开启权限")
						//             console.log(res.authSetting)
						// 			if(res.authSetting['scope.userLocation']){
						// 				console.log("用户已经开启权限")
						// 			}
						// 		}
						//       })

						//     }
						//   }
						// });
				    }
				});
			},
			submitll(datas){
				sync_coordinates(datas).then((res) => {
					console.log("sync_coordinates接口返回数据：")
					console.log(JSON.stringify(res));
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
				})
			},
			isObjectEmpty(obj) { //判断card对象是否为空
				if(obj == null){
					return false
				}else{
					if(!(Object.keys(obj).length === 0)){
						if(obj.privilege_card_count >= 1 || obj.score_card_count >= 1){
							return true
						}else{
							return true
							// return false
						}
					}					
					// console.log(Object.keys(obj).length)
					// return ;
				}
			  
			},
			getusermy_cards(){
				usermy_cards().then((res) => {
					console.log("getusermy_cards接口返回数据：")
					console.log(JSON.stringify(res));
					
					
					if(res.data){
						this.usermycards = res.data
					}else{
						this.usermycards={
							privilege_card_count:0,
							score_card_count:0,
						}
					}
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			
			shopinfo(){
				userget_shop_detail(this.shopid).then((res) => {
					console.log("userget_shop_detail接口返回数据：")
					console.log(JSON.stringify(res));
					this.shopinfoarr = res.data
					this.cardinfo = this.shopinfoarr.card
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
				})
			},
			toggle() {
				this.isActive = !this.isActive;
			},
			exexchange_proportion(num){
				let tempnum = 0
				if(num != '' && num != null){
					tempnum = parseFloat(num) * 100
				}
				return tempnum
			},
			handelLower() {
				console.log("滚动到底部>>>");
				if (this.status == "loading") return;
				if (!this.status == "noMore") return;
			
				this.pagenumber += 1;
			  
				this.getshoplist(true);
			},
			handleRefresher() {
			  console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
			  this.isLoadingTop = true;
			  this.isTriggeredTop = true;
			  if (!this.isLoadingTop) return;
			  
			  // this.$store.commit("setShipGuids", "");
			  this.getshoplist();
			  this.isLoadingTop = false;
			  this.isTriggeredTop = false;
			},
			handelonRestore() {
			  console.log("handelonRestore>>>");
			  this.isLoadingTop = true; 
			},
			getshoplist(load){
				userget_shop_list(this.pagenumber).then((res) => {
					console.log("userget_shop_list接口返回数据：")
					console.log(JSON.stringify(res)); 
					this.shopnumber = res.data.total
					uni.setStorageSync('shopnumber',res.data.total);
					if(load){
						if (res.data.list && res.data.list.length == 0) {
							uni.hideLoading();
							uni.showToast({
								title: '没有更多了',
								duration: 2000
							});
							this.status = 'noMore'
							this.pagenumber -= 1;
						} else {
							this.listarr = this.listarr.concat(res.data.list);
							uni.hideLoading();
							this.status = 'more'
						}
					}else{
						if(res.data.list.length >=1){
							this.listarr = res.data.list
							this.status = 'more'
							uni.hideLoading();
						}else{
							this.status = 'noMore'
						}
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.errMsg){
						uni.showModal({
							title: '提示',
							content: '报错：'+err.errMsg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			
			
		}
	}
</script>

<style lang="scss">
	.content{
		position: relative;
		
		// &:before{
		// 	background: linear-gradient(145deg, rgba(252,182,148,1), rgba(232,88,88,1));
		// 	border-bottom-left-radius: 10%;
		// 	border-bottom-right-radius: 10%;
		// 	position: absolute;
		// 	content: "";
		// 	height: 170rpx;
		// 	top: 0;
		// 	left: 0;
		// 	right: 0;
		// 	z-index: -1;
		// }
		.bg-radius{
			border-radius: 30rpx;
			box-sizing: border-box;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
			color: #101010;
			background-color: #fff;
		}		
		// .user-info{
		// 	margin-top: 50rpx;
		// 	overflow: hidden;
		// }
		
	}
	
	.card-bg{
		position: relative;
		border-radius: 10rpx;
		height: 400rpx;
		margin: 200rpx 60rpx 0; 
		background: linear-gradient(1800deg, rgba(211,177,144,1), rgba(177,144,97,1));
		button{
			position: absolute;
			bottom: 30rpx;
			z-index: 4;
			left: 50%;
			margin-left: -60rpx;
			color: #4c4c4c;
			background-color: #cda479;
			box-shadow: inset 0 3rpx 4rpx rgba(0, 0, 0, .5);
		}
		button.active{
			color: #ffb54c;
			background-color: #6e5438;
		}
	}
	.card-cover{
		position: absolute;
		left: -6rpx;
		right: -6rpx;
		top: 100rpx;
		border-radius: 10rpx;
		bottom: 0;
		z-index: 3;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .5);
		background: linear-gradient(1800deg, rgba(230,200,170,1), rgba(200,170,130,1));
	}
	.card{
		border-radius: 16rpx;
		margin: 30rpx 30rpx 0;
		padding: 30rpx;
		color: #fff;
		position: relative;
		background: linear-gradient(145deg, rgba(80,60,60,1), rgba(34,34,36,1));
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .3);
		&:before, &::after{
			position: absolute;
			width: 400rpx;
			height: 400rpx;
			border-radius: 200rpx;
			content: "";
			background-color: rgba(255, 255, 255, .05);
		}
		&:before{
			left: -160rpx;
			top: 0;
		}
		&::after{
			bottom: -120px;
			right: 20rpx;
		}
		.card-hd{
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.card-bd{
			padding: 30rpx;
			font-size: 26rpx;
			color: #fff;
			display: flex;
			align-items: center;
			.join ,.city{
				text-align: center;
				width: 50%;
				span{
					display: block;
				}
			}
			
			text{
				display: block;
			}
			text:first-child{
				margin-bottom: 20rpx;
			}
			text:last-child{
				color: #eaa03d;
			}
			
		}
		
	}
	.card {
	  transition: transform 0.3s;
	  transform: translateY(10%);
	}
	 
	.card-active {
	  transform: translateY(-50%);
	  
	}
	page{
		background-color: #f6f6f6;
	}
	
</style>
